<template>
  <div style="width:400px ;margin: auto auto;">
    <h1 style="text-align: center;color: #0062CC;margin-bottom: 200px;">欢迎光临成都军区总院</h1>
    <div>
      <el-button type="success" style="width: 400px;margin-bottom: 20px;" round @click="record">病历填写</el-button>
      <br>
      <el-button type="primary" style="width: 400px;margin-bottom: 20px;" round @click="apply">预约</el-button>
      <br>
      <el-button type="info" style="width: 400px;margin-bottom: 20px;" round @click="query">预约查询</el-button>
    </div>
    <el-dialog title="预约申请" :visible.sync="applyVisible" width="430px">
      <el-form :model="form">
        <el-form-item label="入住时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.applyTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item label="科室" :label-width="formLabelWidth">
          <el-select v-model="form.depId" placeholder="请选择科室">
            <el-option v-for="item in depList" :key="item.id" :label="item.depName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="病房类型" :label-width="formLabelWidth">
          <el-select v-model="form.wardType" placeholder="请选择病房类型">
            <el-option label="普通病房" value="0" />
            <el-option label="高级病房" value="1" />
            <el-option label="特护病房" value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="applyVisible = false">取 消</el-button>
        <el-button type="primary" @click="addApply">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="预约信息查询" :visible.sync="queryVisible">
      <el-table :data="list">
        <el-table-column property="applyTime" label="申请入住时间" width="200" />
        <el-table-column property="wardType" label="申请病房类型" width="200" >
          <template slot-scope="scope">
            <span v-if="scope.row.wardType==0">普通房</span>
            <span v-if="scope.row.wardType==1">高级房</span>
            <span v-if="scope.row.wardType==2">特护房</span>
          </template>
        </el-table-column>
        <el-table-column prop="applyStatus" label="申请状态">
          <template slot-scope="scope">
            <span v-if="scope.row.applyStatus==0">申请中</span>
            <span v-if="scope.row.applyStatus==1">申请成功</span>
            <span v-if="scope.row.applyStatus==2">已驳回</span>
            <span v-if="scope.row.applyStatus==3">已住院</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 病例填写 -->
    <el-dialog title="病例填写" :visible.sync="recordVisible">
      <el-form
        ref="dataForm3"
        :model="temp"
        label-position="right"
        label-width="150px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="疾病症状" prop="symptom">
          <el-input v-model="temp.symptom" type="textarea" :disabled="readonly" />
        </el-form-item>
        <el-form-item label="医生诊断" prop="diagnosis">
          <el-input v-model="temp.diagnosis" type="textarea" :disabled="readonly" />
        </el-form-item>
        <el-form-item label="过敏史" prop="allergy">
          <el-input v-model="temp.allergy" :disabled="readonly" />
        </el-form-item>
        <el-form-item label="传染性" prop="isInfectious">
          <template>
            <el-radio v-model="temp.isInfectious" label="0" :disabled="readonly">否</el-radio>
            <el-radio v-model="temp.isInfectious" label="1" :disabled="readonly">是</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="是否复诊" prop="isRecheck">
          <template>
            <el-radio v-model="temp.isRecheck" label="0" :disabled="readonly">否</el-radio>
            <el-radio v-model="temp.isRecheck" label="1" :disabled="readonly">是</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="检查日期" prop="checkTime">
          <template>
            <div class="block">
              <el-date-picker
                v-model="temp.checkTime"
                :disabled="readonly"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
                :picker-options="pickerOptions1"
              />
            </div>
          </template>
        </el-form-item>

        <!-- <el-form-item label="审核状态 0待审核 1待发布 2已删除" prop="checkStatus">
          <el-input v-model="temp.checkStatus" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="recordVisible = false">
          取消
        </el-button>
        <el-button type="primary" :disabled="readonly" @click="addRecord">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllFather
} from '@/api/department'
import {
  insertOne,
  getByPatientId
} from '@/api/application/application'
import {
  addOne,
  selectOneByPatientId
} from '@/api/record/record'

export default {
  name: 'Index',
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          //如果没有后面的-8.64e7就是不可以选择今天的
          return time.getTime() < Date.now();
        }
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()-8.64e7;
        }
      },
      readonly: false,
      recordVisible: false,
      applyVisible: false,
      queryVisible: false,
      temp: {
        symptom: '',
        diagnosis: '',
        allergy: '',
        isInfectious: '',
        isRecheck: '',
        checkTime: ''
      },
      formLabelWidth: '120px',
      form: {
        depId: '',
        wardType: '',
        applyTime: ''
      },
      depList: [],
      list: []
    }
  },
  created() {
    // 查询该病人的病历
    selectOneByPatientId().then(res => {
      if (res.content != null && res.content != '') {
        this.temp = res.content
        this.readonly = true
      }
    })
    // 查询科室
    getAllFather().then(res => {
      this.depList = res.content
    })
  },
  methods: {
    // 病历查看填写按钮
    record() {
      this.recordVisible = true
    },
    apply() {
      this.applyVisible = true
    },
    // 预约查询按钮
    query() {
      if (this.list.length === 0) {
        getByPatientId().then(res => {
          this.list=res.content
        })
      }
      this.queryVisible = true
    },
    addApply() {
      insertOne(this.form).then(() => {
        this.$notify({
          title: '成功',
          message: '编辑成功',
          type: 'success',
          duration: 2000
        })
      })
      this.applyVisible = false
    },
    addRecord() {
      addOne(this.temp).then(res => {
        this.$notify({
          title: '成功',
          message: '编辑成功',
          type: 'success',
          duration: 2000
        })
        this.recordVisible = false
      })
    }
  }
}
</script>

<style>
</style>
